<template>
  <div class="xtx-checkbox" @click="toggleCheck">
    <!-- 选中小图标 -->
    <i class="iconfont icon-checked" v-if="check"></i>
    <!-- 未选中小图标 -->
    <i class="iconfont icon-unchecked" v-else></i>
    <!-- 自定义文字 -->
    <span><slot/></span>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  name: 'XtxCheckbox',
  props: {
    modelValue: {
      type: Boolean
    }
  },
  setup (props, { emit }) {
    // 1. 状态切换  选中  未选中
    const checkRef = ref(false)
    function toggleCheck () { // 点击时取反 切换状态
      checkRef.value = !checkRef.value
      emit('update:modelValue', checkRef.value)
      // 现在不能直接使用以上的事件了  但是还需要把选中的状态抛出给父组件
      emit('change', checkRef.value)
    }

    // 2. v-model
    //   1. 子组件的选中状态以v-model绑定的为主
    //   2. 子组件内部状态更新之后同步到父组件中的check
    watch(() => { // 监听传下来的值 如果值改变了 立马给check重新赋值
      return props.modelValue
    }, () => {
      checkRef.value = props.modelValue
    }, {
      immediate: true // 立即执行一次
    })

    return {
      check: checkRef,
      toggleCheck
    }
  }
}
</script>
<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  // 选中状态时样式
  .icon-checked {
    color: @xtxColor;
    // 相邻兄弟元素
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>
